<template>
  <Sphere ref="meshRef" :args="[props.data.radius]">
    <TresMeshToonMaterial color="orange" :opacity="0.5" :transparent="true" />
  </Sphere>
</template>
<script lang="ts" setup>
import { Sphere } from '@tresjs/cientos'
import { useRenderLoop } from '@tresjs/core'
import { Sphere as SphereGenerator } from '../../hooks/shapes'

const props = defineProps<{
  data: SphereGenerator
}>()

const meshRef = shallowRef()

const { onLoop } = useRenderLoop()

onLoop(() => {
  meshRef.value.instance.rotation.fromArray(props.data.rotation)
  meshRef.value.instance.position.fromArray(props.data.position)
  meshRef.value.instance.scale.fromArray(props.data.scale)
})
</script>
